<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="crud" :columns="columns" ref="crudRef">

      <!-- 排序列 -->
      <template #sort="{ record }">
        <a-input-number
            :default-value="record.sort"
            mode="button"
            @change="changeSort($event, record.id)"
            :min="0"
            :max="1000"
        />
      </template>
      <!-- logo -->
      <template #cover="{ record }">
        <a-image :src="record.cover ? $tool.showFile(record.cover):''" height="50" />
      </template>
      <!-- logo -->
      <template #qrcode="{ record }">
        <a-image :src="record.qrcode ? $tool.showFile(record.qrcode):''" height="50" />
      </template>
      <!-- 状态列 -->
      <template #status="{ record }">
        <a-switch
            :checked-value="1"
            unchecked-value="2"
            @change="changeStatus($event, record.id)"
            :default-checked="record.status == 1"
        />
      </template>

    </ma-crud>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { Message } from '@arco-design/web-vue'
import api from "@/api/prm/life/list.js";

const crudRef = ref()


const actType = [
  { label: '电话卡', value: 'mobile_card' },
]


const changeStatus = async (status, id) => {
  const response = await api.updateByField({ id, value:status,field:'status' })
  if (response.success) {
    Message.success(response.message)
  }
}

const changeSort = async (value, id) => {
  const response = await api.updateByField({ id, value,field:'sort' })
  if (response.success) {
    Message.success(response.message)
  }
}

const crud = reactive({
  api: api.list,
  showIndex: false,
  // pageLayout: 'fixed',
  rowSelection: { showCheckedAll: true },
  operationColumn: true,
  operationColumnWidth: 200,
  add: { show: true, api: api.add, auth: ['prm:life_act:save'] },
  edit: { show: true, api: api.update, auth: ['prm:life_act:update'] },
  delete: {show: true, api: api.delete, auth: ['prm:life_act:delete'],},
  formOption: { viewType: 'drawer', width: 600 },
})

const columns = reactive([
  { title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true },
  {
    title: '一级分类', dataIndex: 'cate1_id', hide: true, formType: 'select', commonRules: [{ required: true, message: '一级分类必填' }],
    dict: { url: 'prm/life_cate/allList', params: {only_parent: true },props: { label: 'name', value: 'id'}, }, addDefaultValue: 0,
    cascaderItem: ['cate2_id'],
  },
  {
    title: '二级分类', dataIndex: 'cate2_id', hide: true, formType: 'select',
    dict: { url: 'prm/life_cate/allList', params: { },props: { label: 'name', value: 'id'}, }, addDefaultValue: 0,
  },
  {
    title: '活动名称', dataIndex: 'name', search: true, commonRules: [{ required: true, message: '活动名称必填' }], width: 180,
  },

  {  title: '结算金额', dataIndex: 'amt', width: 80, formType: 'input-number', commonRules: [{ required: true, message: '结算金额必填' }]},
  {  title: '图标', dataIndex: 'cover', width: 80, formType: 'upload',type: 'image'},
  {  title: '活动类型', dataIndex: 'type', search: true, width: 80, formType: 'select',
    dict: {
      data: actType, translation: true,
    },
  },
  {
    title: '备注', dataIndex: 'remark', hide: true, search: true, width: 180,
  },

  {
    title: '排序', dataIndex: 'sort', formType: 'input-number', addDefaultValue: 1, width: 180,
    min: 0, max: 1000
  },

  {
    title: '状态', dataIndex: 'status', search: true, formType: 'radio',
    dict: { name: 'data_status', props: { label: 'title', value: 'key' } },
    addDefaultValue: '1', width: 120,
  },
  {
    title: '二维码', dataIndex: 'qrcode', hide: false, formType: 'upload',type: 'image'
  },
  {
    title: '详情图', dataIndex: 'detail_imgs', hide: true, formType: 'upload',type: 'chunk',multiple:true,
  },
  {
    title: '创建时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false,
    search: true, formType: 'range', width: 180,
  },
])
</script>

<script>
export default { name: 'prm:life_act' }
</script>

<style scoped>
.icon {
  width: 1em;
}
</style>
